import { getViewportOffset } from '@/utils/dom';
import { ref, unref, computed, nextTick, watch, onMounted } from 'vue';
import { useEventListener } from '@/hooks/event/useEventListener';
export const useTableScroll = (allProps: any, tableElRef: any) => {
    const scrollConfig = ref<any>({}); // scroll参数
    // 计算获取滚动x参数
    const scrollX = computed(() => {
        let width = 0;
        // 有选择框的情况
        if (unref(allProps)['row-selection']) {
            width += 40;
        }
        const normalWidth = 150;
        const columns: any = unref(allProps).columns;
        // 累加列设置中的每列宽度
        columns.forEach((item: any) => {
            width += Number.parseInt(item.width as string) || 0;
        });
        // 计算列设置中没有设置宽度的列
        const unsetWidthColumns = columns.filter((item: any) => !Reflect.has(item, 'width'));
        // 给没设置列宽度的自动算上默认宽度
        const len = unsetWidthColumns.length;
        if (len !== 0) {
            width += len * normalWidth;
        }
        // 判断表格实际宽度是否大于列计算出来的宽度，只有实际宽度小于列计算的宽度才出现滚动
        return unref(tableElRef).$el.offsetWidth > width ? '100%' : width;
    });
    // 计算表格自适应高度
    const calcTableHeight = () => {
        const list: any = unref(allProps)['data-source'];
        // if (!unref(allProps).autoResize || !list.length) {
        //     return null;
        // }
        const tableEl = unref(tableElRef).$el;
        let tableHeight = 0;
        const paddingHeight = 24; // 底部padding
        //头部高度
        const headEl = tableEl.querySelector('.ant-table-thead');
        const { bottomIncludeBody } = getViewportOffset(headEl); // 计算出表格头部到窗口最底部的距离，然后挨个相减
        let headerHeight = 0;
        if (headEl) {
            // headerHeight = headEl.offsetHeight;
            headerHeight = 39;
        }
        // 分页高度
        let paginationHeight = 16;
        const paginationEl = tableEl.querySelector('.ant-table-pagination');
        if (paginationEl) {
            const offsetHeight = paginationEl.offsetHeight;
            paginationHeight += offsetHeight || 0;
        } else {
            paginationHeight += 24;
        }
        // 表格自适应（在弹窗中等）
        if (tableEl.style.height === '100%') {
            tableHeight = tableEl.offsetHeight - paginationHeight - headerHeight - 2;
        } else {
            tableHeight = bottomIncludeBody - paddingHeight - paginationHeight - headerHeight - 2; // 总高度
        }
        if (list.length) {
            tableEl.querySelector('.ant-table-body').style.height = ~~bottomIncludeBody + 'px'; // 只是内容高度
        } else {
            tableEl.querySelector('.ant-table-body').style.height = 0;

        }
        return tableHeight;
    };
    const initScrollConfig = () => {
        nextTick(() => {
            const { autoResize, scroll } = unref(allProps);
            if (unref(tableElRef)) {
                scrollConfig.value = {
                    x: unref(scrollX),
                    y: autoResize ? calcTableHeight() : null,
                    ...scroll
                };
            }
        });
    };
    // 窗口改变自适应高度
    useEventListener({
        fn: initScrollConfig
    });
    // 元素改变自适应高度
    onMounted(() => {
        const resizeObserver = new (window as any).ResizeObserver((entries: any) => {
            initScrollConfig();
        });
        resizeObserver.observe(unref(tableElRef).$el.parentElement);
    });
    watch(() => allProps.value['data-source'], () => {
        initScrollConfig();
    }, {
        deep: true
    });
    return {
        scrollConfig
    };
};